<template>
  <div class="style-container">
    <div v-for="(item,index) in config" :key="index" class="item">
      <span v-if="item.label" style="font-size: 14px;margin-right: 12px;color: #999">{{ item.label }}</span>
      <!-- 颜色选择器 -->
      <el-color-picker v-if="item.name === 'ColorPicker'" v-model="item.value" :show-alpha="true" :disabled="disabled" color-format="rgb" size="small" @change="changeConfig"/>
      <!-- 正常下拉框选择 -->
      <el-select
        v-if="item.name === 'select'"
        v-model="item.value"
        :style="item.width ? {width: item.width} : {width: '56px'}"
        :disabled="disabled"
        size="mini"
        placeholder="请选择"
        @change="changeConfig">
        <template>
          <el-option
            v-for="i in item.options"
            :key="i.value"
            :label="i.label"
            :value="i.value" />
        </template>
      </el-select>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    newConfig: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      config: [
        {
          name: 'ColorPicker',
          word: 'color',
          label: '字体颜色',
          value: '#141C3D',
          default: '#141C3D'
        },
        {
          name: 'ColorPicker',
          word: 'bgColor',
          label: '背景颜色',
          value: '#f9f9f9',
          default: '#f9f9f9'
        }
      ]
    };
  },
  watch: {
    newConfig: function(newVal) {
      newVal && this.setConfig(JSON.parse(newVal));
    }
  },
  methods: {
    changeConfig() {
      this.$emit('configChange', this.getstyConfig());
    },
    resetConfig() {
      this.config = [
        {
          name: 'ColorPicker',
          word: 'color',
          label: '字体颜色',
          value: '#141C3D',
          default: '#141C3D'
        },
        {
          name: 'ColorPicker',
          word: 'bgColor',
          label: '背景颜色',
          value: '#f9f9f9',
          default: '#f9f9f9'
        }
      ];
    },
    getstyConfig() {
      const styConfig = {};
      this.config.forEach(el => {
        styConfig[el.word] = el.value;
      });
      return JSON.stringify(styConfig);
    },
    setConfig(newConfig = '') {
      if (!newConfig) {
        return;
      }
      Object.keys(newConfig).forEach(key => {
        this.config.forEach(j => {
          if (key === j.word) {
            j.value = newConfig[key];
          }
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
	.style-container{
		display: flex;
		flex-wrap: wrap;
		.item{
			display: flex;
			align-items: center;
      margin-right: 12px;
      &::v-deep {
        .el-color-picker, .el-color-picker .el-color-picker__trigger, .el-color-picker .el-color-picker__mask{
          width: 38px;
          height: 22px;
        }
			}
		}
	}
</style>
